<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>花样链接</title>
		<style type="text/css">
		#d1{
			width: 300px;
			height:280px;
			padding: 10px;
			border: 1px solid red;
		}
		a:hover {
            background: blue;
        }
		a{
			width: 100px;
			height: 100px;
			background: fuchsia;
			line-height: 100px;
			text-align: center;
			
		}
		.o1{
			position: absolute;
			left: 19px;
			top: 13px;
		}
		.o2{
			position: absolute;
			top: 200px;
			left: 20px;
		}
		.o3{
			position: absolute;
			top: 11px;
			left: 222px;
		}
		.o4{
			position: absolute;
			top: 199px;
			left: 220px;
		}
		.o5{
			position: absolute;
			top: 100px;
			left: 120px;
		}
		</style>
	</head>
	<body>
		<div id="d1">
			<a class="o1" >链接1</a>
			<a class="o3">链接2</a>
			<a class="o4">链接3</a>
			<a class="o2">链接4</a>
			<a class="o5">链接5</a>
		</div>
	</body>
</html>
